import { Indicator } from 'mint-ui'
import * as types from '../types'
import fetchApi from '@/fetch/api'

const state = {
  Desc: {},
  Detail: {}
}
/**
 * Actions are similar to mutations, the differences being that:
 *  1. Instead of mutating the state, actions commit mutations. (具体的改变state还是在mutations中完成的)
 *  2. Actions can contain arbitrary asynchronous(异步的，比如文件操作，网络请求) operations.
 * Actions are triggered with the store.dispatch method:
 *
 */
const actions = {
  // 简要 description
  getDesc ({commit}, type) {
    // console.log('type', type)
    fetchApi.getTypeDesc(type).then(res => {
      // console.log(`get ${type} fetchApi:`, res)
      Indicator.close()
      commit(types.SET_TYPE_DESC, res)
    })
  },
  // 详情 detail
  getDetail ({commit}, obj) {
    console.log(`post ${obj.type} ${obj.id} data:`)
    fetchApi.getTypeDetail(obj.type, obj.id).then(res => {
      console.log('res detail ', res)
      commit(types.SET_TYPE_DETAIL, res)
    })
  }

}

const getters = {
  Desc: state => state.Desc,
  Detail: state => state.Detail
}
/**
 * The only way to actually change state in a Vuex store is by committing a mutation.
 * Vuex mutations are very similar to events: each mutation has a string type and a handler.
 * The handler function is where we perform actual state modifications,
 * and it will receive the state as the first argument:
 *
 * You cannot directly call a mutation handler.
 * To invoke a mutation handler, you need to call store.commit with its type: store.commit(type)
 */
const mutations = {
  [types.SET_TYPE_DESC] (state, res) {
    // perform actual state modifications
    state.Desc = res
  },
  [types.SET_TYPE_DETAIL] (state, res) {
    // state modifications
    state.Detail = res
  }
}
export default {
  state,
  actions,
  getters,
  mutations
}
